import React,{Component} from 'react';
import {
  Link
} from 'react-router-dom';
import './company.scss';
import { getIndexInfo } from 'api/company.js';
import { addCollection, delCollection, checkCollection } from 'api/user.js';
import Companyindex from './companycontent/companyindex.jsx';
import Companyproduct from './companycontent/companyproduct.jsx';
import Companyfile from './companycontent/companyfile.jsx';
import Companycontact from './companycontent/companycontact.jsx';
export default class Company extends Component{
	constructor (props) {
		super(props)
		this.state={
			shop_id:props.location.state.shop_id,
			cont:<Companyindex shop_id={this.props.location.state.shop_id} handleSort={sum => this.handleSort(sum)}/>,
			shop_info :{},
			backgroundImgInfo: {},
			bannerImgInfo:[],
			sort: 1,
			titleList: ['店铺首页', '供应商品', '店铺档案', '联系我们'],
			list: 0,
			keywords: '',
			collect: 'glyphicon-collsct',
			collect_id :'',
			fixed: ''
		}
	}
	show = (index) => {
		this.setState({
			list: index
		}, () => {
			if (this.state.list === 0) {
				this.setState({
					cont:<Companyindex shop_id={this.state.shop_id} handleSort={sum => this.handleSort(sum)} sort={this.state.sort}/>
				},()=>{
					this.getFixed()
				})
			} else if (this.state.list === 1) {
				this.setState({
					cont:<Companyproduct shop_id={this.state.shop_id} sort={this.state.sort} fixedNav={zhi => this.fixedNav(zhi)}/>
				})
			} else if (this.state.list === 2) {
				this.setState({
					cont: <Companyfile shop_id={this.state.shop_id}/>
				},()=>{
					this.getFixed()
				})
			} else if (this.state.list === 3) {
				this.setState({
					cont: <Companycontact shop_id={this.state.shop_id}/>
				},()=>{
					this.getFixed()
				})
			}
		})
	}
	handleChange = (e) => {
    this.setState({
    	keywords: e.target.value
    })
  }
	handleSort (sum) {
		this.setState({
			sort: sum
		}, () => {
			this.show(1)
		})
	}
	_getIndexInfo (num) { //店铺首页基本信息和图片接口
		getIndexInfo({
			shop_id : num
		}).then(res => {
			if(res.code === 1){
				Object.keys(res.data).forEach(key => {
					if(key === 'shop_info '){
						this.setState({
							shop_info:res.data[key]
						})
					}	else if (key === 'backgroundImgInfo'){
						this.setState({
							backgroundImgInfo:res.data[key]
						})
					} else if (key === 'bannerImgInfo'){
						this.setState({
							bannerImgInfo:res.data[key]
						})
					}
				})
			}
		})
	}
	enterInto () { //回车进行搜索
    this.props.history.push({
      pathname:'/company/classifyList',
			state:{
				shop_id: this.props.location.state.shop_id,
				keywords: this.state.keywords
			}
    })
    return false;
  }
  collect () { //收藏店铺
  	if(this.state.collect === 'glyphicon-collsct'){
  		this._addCollection()
  	} else if(this.state.collect === 'glyphicon-oncollsct active'){
  		this._delCollection()
  	}
  }
  _addCollection () { //添加收藏接口
  	addCollection({
			collect_type: 2,
			shop_id:this.state.shop_id,
			shop_name:this.state.shop_info.shop_name
		}).then(res => {
			if (res.code === 1){
				this.setState({
					collect: 'glyphicon-oncollsct active',
					collect_id: res.data
				})
			} else if ( res.code === -403){
				this.props.history.push({
            pathname: '/login'
          })
			}
		})
  }
  _delCollection () { //用户取消收藏接口
  	delCollection({
  		collect_id: this.state.collect_id,
  		collect_type: 2
  	}).then(res => {
  		if(res.code === 1){
  			this.setState({
  				collect: 'glyphicon-collsct'
  			})
  		}
  	})
  }
  _checkCollection () { //判断用户是否收藏商品或者店铺接口
  	checkCollection({
  		shop_id:this.state.shop_id
  	}).then(res => {
  		if(res.code === 1){
  			this.setState({
  				collect: 'glyphicon-oncollsct active',
  				collect_id :res.data.favorites_shop_id
  			})
  		}
  	})
  }
  getFixed = () => { //固定导航
  	let that= this;
  	window.onscroll= function(){
			if (document.documentElement.scrollTop >= 118) {
				that.setState({
					fixed: 'guding'
				})
			} else {
				that.setState({
					fixed: ''
				})
			}
		}
  }
  fixedNav =(zhi) => {
  	this.setState({
  		fixed: zhi
  	})
  }
	componentDidMount () {
		this._checkCollection();
		if(this.props.location.state.list){
			this._getIndexInfo(this.state.shop_id);
			this.show(this.props.location.state.list)
		} else {
			this._getIndexInfo(this.state.shop_id)
		}
		let that= this;
  	window.onscroll= function(){
			if (document.documentElement.scrollTop >= 118) {
				that.setState({
					fixed: 'guding'
				})
			} else {
				that.setState({
					fixed: ''
				})
			}
		}
	}
	render(){
		return(
			<div className="company">
				<div id="header">
					<div><Link to="/"><img src="static/images/sy/LOGO .png"/></Link></div>
					<div className="com_sea">
						<form onSubmit={this.enterInto.bind(this)} action="#" className="searchInto">
							<input type="text" placeholder="请输入公司关键词" onChange={this.handleChange} value={this.state.keywords} className="com_sear"/>
						</form>
					</div>
					<Link to={
						{
							pathname:'/company/classifyList',
							state:{
								shop_id: this.props.location.state.shop_id,
								keywords: this.state.keywords
							}
						}
					}>
						<span className="glyphicon glyphicon-search sea"></span>
					</Link>
					<div>
						<Link to="/user">
							<i className="glyphicon glyphicon-user user"></i>
						</Link>
					</div>
				</div>
				
				<div className="company_banner">
					{
						this.state.backgroundImgInfo.length === 0 ?
						<img src="/static/images/default/shopbanner.jpg"/>
						: <img src={this.state.backgroundImgInfo.pic_url}/>
					}
					<span className="companyChange"></span>
					<p>{this.state.shop_info.shop_name}</p>
					<p onClick={this.collect.bind(this)} className={this.state.collect === 'glyphicon-oncollsct active' ? 'active' : undefined}><span className={`glyphicon ${this.state.collect}`}></span>收藏店铺</p>
				</div>
				<div className={`company_nav ${this.state.fixed}`}>
					{
						this.state.titleList.map((item,index) => {
							return(
								<div className={this.state.list === index ? 'active' : undefined} onClick={this.show.bind(this,index)} key={index}>{item}</div>
							)
						})
					}
				</div>
				<div className="company_content">
					<div className={this.state.type}>
						{this.state.cont}
					</div>
				</div>
			</div>
		)
	}
}
